# `FrameLessUI`: 跨`框架`的`轻量`前端`ui组件库`

> 为何跨框架: 因为html原生支持, 所以也支持Vue2/Vue3/React/Angular/JQuery...

## 基本原理: web component

> 配套API: shadow dom & template & slot
> CustomEvent & \<HTMLElement\>.dispatchEvent

> 这些API都是[官方标准](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components)，[不兼容ie](https://caniuse.com/?search=Custom%20Elements)

> 标准提出2011年、浏览器支持2018年

案例: [fl-badge组件](http://localhost:5173/docs/Dev_Docs/customElements.define.html)

web component支持我们自定义像video这样的组件，无需编译，命名必须包含-

![webcomponent](/docs/images/webcomponent.jpg)

在线访问

http://172.16.10.180:5173/src/components/button/index.test.html

http://172.16.10.180:6008/?path=/docs/use-docs-shared--docs

## 传统封装组件
选框架 => 原生js用着没那么便捷（数据驱动视图）

vue3 => vue2 (冲突)

vue3 => react (需要导入vue3的runtime)

## web component
1. 纯js编写

  web component 配套了 `shadow dom`、`template`、`slot`, 但是缺少`数据驱动视图`

2. [用现有的前端框架编写](https://webcomponents.dev/new)

  vue3、react官方都支持组件导出为web-component

  [运行时依赖对比](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)

## 目前比较成熟的web component组件库

[shoelace](https://shoelace.style/components/dialog) `start: 11.6k` `lit`

[fast](https://www.fast.design/) `8.9k` `本身也是一个框架`

[mdui](https://www.mdui.org/zh-cn/docs/2/components/button) `3.8k` `lit`

[quarkd](https://vue-quarkd.hellobike.com/#/zh-CN/component/button) `1.8k` `vue`

## 框架选用分析

1. vue(50kb)

  运行时代码过大、vue2和vue3运行时冲突

2. react(128kb)

  运行时代码过大，导入不同版本的react也可能会冲突

3. lit(15kb) `谷歌` `start: 17.2k`

  需要学习成本

4. preact(11kb) `start: 35.8k`

  preact，运行时小，学习成本低，与vue3/vue2/react不冲突

## 应用场景

> preact开发组件，在vue2/vue3项目中共同使用

## 如何引入

=> vue3
```tsx


<template>
  
  <fl-input type="primary" v-model="value"></fl-input>

</template>

<script setup>
import 'flessui/component/input'; // 导入组件

import ref from 'vue';
const value = ref('默认值');
</script>
```

## 如何在业务上继承/使用



## 框架搭建

1. vite调试

2. storybook组件文档

## 框架待改进

### 按需加载

![按需加载](/docs/images/axload.jpg)

### 加载优化

web component未加载/定义时，自定义组件将被当无效元素，但是嵌套的元素仍会显示(无样式)，之后加载后会更新视图（其中会有一个闪动） => 未加载前显示`骨架屏`

### seo
shadow dom特性：元素隔离

seo不会读取shadow root下面的元素

1. 不使用shadow，[devui](https://devui.design/components/zh-cn/button/demo) `start 1.7k`

2. [lit貌似解决了shadow dom的seo](https://lit.dev/docs/ssr/overview/)

### 组件自动化测试工具
目的：兼容不同环境下使用web component

`react` - 开发调试直接是在preact下调试的✅

`原生` - ✅

`vue3`

`vue2`

